<template>
  <view class="invoice-container">
    <!-- 发票状态 -->
    <view class="status-card">
      <image :src="invoice.qrCode" mode="aspectFit" class="qr-code" />
      <text class="title">电子发票</text>
      <text class="desc">可通过微信/支付宝扫码查看</text>
    </view>
    
    <!-- 发票信息 -->
    <view class="info-card">
      <view class="section-title">发票信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">发票代码</text>
          <text class="value">{{ invoice.code }}</text>
          <text class="copy" @tap="copyText(invoice.code)">复制</text>
        </view>
        <view class="info-item">
          <text class="label">发票号码</text>
          <text class="value">{{ invoice.number }}</text>
          <text class="copy" @tap="copyText(invoice.number)">复制</text>
        </view>
        <view class="info-item">
          <text class="label">开票日期</text>
          <text class="value">{{ invoice.date }}</text>
        </view>
        <view class="info-item">
          <text class="label">发票金额</text>
          <text class="value amount">¥{{ invoice.amount }}</text>
        </view>
      </view>
    </view>
    
    <!-- 开票信息 -->
    <view class="info-card">
      <view class="section-title">开票信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">发票抬头</text>
          <text class="value">{{ invoice.title }}</text>
        </view>
        <view class="info-item">
          <text class="label">纳税人识别号</text>
          <text class="value">{{ invoice.taxNumber }}</text>
        </view>
        <view class="info-item">
          <text class="label">开票单位</text>
          <text class="value">{{ invoice.issuer }}</text>
        </view>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="info-card">
      <view class="section-title">订单信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">医院</text>
          <text class="value">{{ invoice.hospitalName }}</text>
        </view>
        <view class="info-item">
          <text class="label">就诊人</text>
          <text class="value">{{ invoice.patientName }}</text>
        </view>
        <view class="info-item">
          <text class="label">就诊科室</text>
          <text class="value">{{ invoice.departmentName }}</text>
        </view>
        <view class="info-item">
          <text class="label">订单编号</text>
          <text class="value">{{ invoice.orderNo }}</text>
        </view>
      </view>
    </view>
    
    <!-- 预览弹窗 -->
    <uni-popup ref="previewPopup" type="center">
      <view class="preview-popup">
        <view class="popup-header">
          <text class="title">发票预览</text>
          <text class="close" @tap="closePreview">×</text>
        </view>
        <view class="preview-content">
          <image 
            :src="invoice.previewImage" 
            mode="widthFix" 
            class="preview-image"
            @tap="previewFullImage"
          />
        </view>
      </view>
    </uni-popup>
    
    <!-- 打印设置弹窗 -->
    <uni-popup ref="printPopup" type="bottom">
      <view class="print-popup">
        <view class="popup-header">
          <text class="title">打印设置</text>
          <text class="close" @tap="closePrint">×</text>
        </view>
        <view class="print-options">
          <view class="option-item">
            <text class="label">打印份数</text>
            <view class="counter">
              <text 
                class="minus" 
                :class="{ disabled: printCount <= 1 }"
                @tap="printCount > 1 && printCount--"
              >-</text>
              <text class="count">{{ printCount }}</text>
              <text 
                class="plus"
                :class="{ disabled: printCount >= 5 }"
                @tap="printCount < 5 && printCount++"
              >+</text>
            </view>
          </view>
          <view class="option-item">
            <text class="label">打印颜色</text>
            <view class="color-options">
              <text 
                v-for="option in colorOptions"
                :key="option.value"
                :class="{ active: printColor === option.value }"
                @tap="printColor = option.value"
              >{{ option.label }}</text>
            </view>
          </view>
        </view>
        <button 
          class="confirm-btn primary-btn"
          @tap="confirmPrint"
        >确认打印</button>
      </view>
    </uni-popup>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="action-btn outline" @tap="showPreview">预览发票</button>
      <button class="action-btn outline" @tap="showPrint">打印发票</button>
      <button class="action-btn primary" @tap="shareInvoice">分享发票</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 发票数据
const invoice = ref({
  code: '044031900111',
  number: '37164339',
  date: '2024-03-25',
  amount: 360.00,
  title: '个人',
  taxNumber: '-',
  issuer: '澳门镜湖医院',
  hospitalName: '澳门镜湖医院',
  patientName: '张三',
  departmentName: '心内科',
  orderNo: 'P202403250001',
  qrCode: '/static/payment/invoice-qr.png',
  previewImage: '/static/payment/invoice-preview.png',
})

// 复制文本
const copyText = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success'
      })
    }
  })
}

// 保存发票
const saveInvoice = () => {
  uni.showLoading({
    title: '保存中...'
  })
  
  // 这里调用保存发票API
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })
  }, 1000)
}

// 分享发票
const shareInvoice = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 2,
    imageUrl: invoice.value.qrCode,
    success: (res) => {
      console.log('分享成功:', res)
    },
    fail: (err) => {
      console.error('分享失败:', err)
    }
  })
}

// 预览相关
const previewPopup = ref(null)
const showPreview = () => {
  previewPopup.value?.open()
}
const closePreview = () => {
  previewPopup.value?.close()
}
const previewFullImage = () => {
  uni.previewImage({
    urls: [invoice.value.previewImage]
  })
}

// 打印相关
const printPopup = ref(null)
const printCount = ref(1)
const colorOptions = [
  { label: '彩色', value: 'color' },
  { label: '黑白', value: 'bw' }
]
const printColor = ref('color')

const showPrint = () => {
  printPopup.value?.open()
}
const closePrint = () => {
  printPopup.value?.close()
}
const confirmPrint = () => {
  uni.showLoading({
    title: '打印中...'
  })
  
  // 这里调用打印API
  const params = {
    invoiceId: invoice.value.id,
    count: printCount.value,
    color: printColor.value
  }
  console.log('打印参数:', params)
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '打印成功',
      icon: 'success'
    })
    closePrint()
  }, 2000)
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const id = page.$page?.options?.id
  
  // 加载发票数据
  loadInvoice(id)
})

// 加载发票数据
const loadInvoice = (id) => {
  // 这里调用API获取数据
  console.log('加载发票:', id)
}
</script>

<style lang="scss">
.invoice-container {
  min-height: 100vh;
  background: $bg-color;
  padding: 40rpx 20rpx;
  
  .status-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 40rpx;
    text-align: center;
    margin-bottom: 30rpx;
    box-shadow: $shadow-sm;
    
    .qr-code {
      width: 300rpx;
      height: 300rpx;
      margin-bottom: 30rpx;
    }
    
    .title {
      font-size: 36rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 12rpx;
      display: block;
    }
    
    .desc {
      font-size: 26rpx;
      color: $text-secondary;
    }
  }
  
  .info-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: $shadow-sm;
    
    .info-list {
      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          width: 200rpx;
          font-size: 28rpx;
          color: $text-regular;
        }
        
        .value {
          flex: 1;
          font-size: 28rpx;
          color: $text-primary;
          
          &.amount {
            color: $danger;
            font-weight: bold;
          }
        }
        
        .copy {
          font-size: 24rpx;
          color: $primary-color;
          margin-left: 20rpx;
          padding: 4rpx 12rpx;
          background: $primary-light;
          border-radius: $radius-sm;
          
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }
  
  .bottom-buttons {
    display: flex;
    gap: 16rpx;
    padding: 0 20rpx;
    margin-top: 60rpx;
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      border-radius: $radius-xl;
      
      &.outline {
        color: $primary-color;
        background: #fff;
        border: 2rpx solid $primary-color;
      }
      
      &.primary {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}

/* 预览弹窗样式 */
.preview-popup {
  width: 600rpx;
  background: #fff;
  border-radius: $radius-lg;
  overflow: hidden;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
    
    .title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
    }
    
    .close {
      font-size: 40rpx;
      color: $text-secondary;
      padding: 0 20rpx;
    }
  }
  
  .preview-content {
    padding: 30rpx;
    max-height: 800rpx;
    overflow-y: auto;
    
    .preview-image {
      width: 100%;
      border-radius: $radius-sm;
    }
  }
}

/* 打印设置弹窗样式 */
.print-popup {
  background: #fff;
  border-radius: $radius-lg $radius-lg 0 0;
  overflow: hidden;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
    
    .title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
    }
    
    .close {
      font-size: 40rpx;
      color: $text-secondary;
      padding: 0 20rpx;
    }
  }
  
  .print-options {
    padding: 30rpx;
    
    .option-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      .label {
        font-size: 28rpx;
        color: $text-primary;
      }
      
      .counter {
        display: flex;
        align-items: center;
        background: $bg-color;
        border-radius: $radius-lg;
        overflow: hidden;
        
        text {
          width: 80rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          font-size: 28rpx;
          
          &.minus,
          &.plus {
            color: $primary-color;
            background: $primary-light;
            
            &.disabled {
              opacity: 0.5;
            }
          }
          
          &.count {
            color: $text-primary;
            background: #fff;
            font-weight: bold;
          }
        }
      }
      
      .color-options {
        display: flex;
        gap: 20rpx;
        
        text {
          padding: 10rpx 30rpx;
          font-size: 28rpx;
          color: $text-regular;
          background: $bg-color;
          border-radius: $radius-lg;
          
          &.active {
            color: #fff;
            background: $primary-gradient;
          }
        }
      }
    }
  }
  
  .confirm-btn {
    margin: 0 30rpx 30rpx;
  }
}
</style> 